<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Upload 上传</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>文件选择上传和拖拽上传控件。</p>
                        <div class="anchor">
                            <h2 id="基础用法">基础用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <p>基本用法，只需为元素添加属性 dy8-unit 值为 file 即可。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;input type="file" dy8-unit="file" /&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="基础用法">自定义上传地址用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <p>填入自定义ajax上传地址后，表单格式会发生样式变化，用法给元素添加属性为 data-upload-url 值为 上传地址。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" data-upload-url="/douyou8/ajax/upload.php" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;input type="file" dy8-unit="file" data-upload-url="/douyou8/ajax/upload.php" /&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="多文件上传">多文件上传</h2>
                            <a href="#多文件上传">#</a>
                        </div>
                        <p>多文件上传用法给元素添加属性 multiple 就可正常使用</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" multiple >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;input type="file" dy8-unit="file" multiple /&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="没有缩略图">没有缩略图</h2>
                            <a href="#没有缩略图">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" data-show-preview="false" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;input type="file" dy8-unit="file" data-show-preview="false" /&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="只读与禁止上传">只读与禁止上传</h2>
                            <a href="#只读与禁止上传">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" readonly="true" >
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" disabled="true" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row no-gutter"&gt;
            &lt;div class="col-6"&gt;
                &lt;input type="file" dy8-unit="file" readonly="true" &gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div class="row no-gutter"&gt;
            &lt;div class="col-6"&gt;
                &lt;input type="file" dy8-unit="file" disabled="true" &gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="限制上传文件后缀名">限制上传文件后缀名</h2>
                            <a href="#限制上传文件后缀名">#</a>
                        </div>
                        <p>限制文件后缀名类型，为元素添加属性 data-allowed-file-extensions 值为 数组类型。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" data-allowed-file-extensions='["apk","exe"]' multiple class="file-loading" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;input type="file" dy8-unit="file" data-allowed-file-extensions='["apk","exe"]' multiple class="file-loading" accept="image/" &gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="初始化加载预览图">初始化加载预览图</h2>
                            <a href="#初始化加载预览图">#</a>
                        </div>
                        <p>初始化加载预览图，为元素添加属性 data-initial-thumb 值为 数组 url 为图片地址 key 为图片删除时键值，需要删除图片功能时请添加属性 data-delete-url 值为 删除后地址。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <input type="file" dy8-unit="file" data-initial-thumb='[{key:1,url:"http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg"},{key:2,url:"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg"}]' data-delete-url="douyou8/ajax/delete.php" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;input type="file" dy8-unit="file" data-initial-thumb='[{key:1,url:"http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg"},{key:2,url:"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg"}]' data-delete-url="douyou8/ajax/delete.php" /&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>